<template>
	<view class="market">
		<u-line color="info"></u-line>
		<view class="market-time-picker bgc-f8" @click="show = true" :startYear="startYear" :endYear="endYear">
			<view class="market-time-picker-title fillx bsp10">
				时间筛选
				<view class="market-time-picker-show iconfont icon-shangxiajiantou">
					{{chooseDate===''?now:chooseDate}}
				</view>
			</view>
			<u-picker v-model="show" mode="time" :params="params" @confirm="confirm"></u-picker>
		</view>
		<u-line color="info"></u-line>
		
		<view class="market-list fillx bgc-f8">
			<view class="market-list-title fillx bsp10">
				<view class="market-total frsc">
					<view class="market-total-content">
						本月市场经销奖励总计： <u-count-to :start-val="0" :end-val="total" duration="1500" font-size="36"></u-count-to><!-- {{total}} --> <text class="margin_l10 mr">元</text>
					</view>
					<view class="market-awrad-type">
						<u-dropdown :isShowMask_bgc="false">
							<u-dropdown-item v-model="chooseAwradTypes" title="奖励类型" :options="awradTypes"></u-dropdown-item>
						</u-dropdown>
					</view>
				</view>
			</view>
			<view class="market-list-table">
				<u-table bg-color="#f2f2f2" :th-style="{'background-color':'#e6effb'}">
						<u-tr>
							<u-th>序号</u-th>
							<u-th>姓名</u-th>
							<u-th>金额</u-th>
						</u-tr>
						<u-tr v-for="(item,index) in tableList" :key="item.name+item.amount+index">
							<u-td>{{index+1}}</u-td>
							<u-td>{{item.name}}</u-td>
							<u-td>{{item.amount}}</u-td>
						</u-tr>
					</u-table>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				params:{
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false,
					sort:true
				},
				chooseDate:'',
				chooseAwradTypes:1,
				awradTypes:[{label:'全部',value:1},{label:'类型2',value:2},{label:'类型3',value:3},{label:'类型4',value:4}],
				tableList:[
					{name:'张三',amount:9999},
					{name:'蔡虚鲲',amount:1212},
					{name:'李四',amount:8888},
					{name:'赵五',amount:6666},
					
					{name:'赵五',amount:6661},
					{name:'赵五',amount:6662},
					{name:'赵五',amount:6663},
					{name:'赵五',amount:6664},
					{name:'赵五',amount:6665},
					{name:'赵五',amount:6666},
					{name:'赵五',amount:6667},
					{name:'赵五',amount:6668},
					{name:'赵五',amount:6669},
					{name:'赵五',amount:6660},
					{name:'赵五',amount:6616},
					{name:'赵五',amount:6626},
					{name:'赵五',amount:6636},
					{name:'赵五',amount:6646},
					{name:'赵五',amount:6656},
					{name:'赵五',amount:6666},
					{name:'赵五',amount:6676},
					{name:'赵五',amount:6686},
					{name:'赵五',amount:6696},
					{name:'赵五',amount:6606},
					{name:'赵五',amount:6166},
					{name:'赵五',amount:6266},
					{name:'赵五',amount:6366},
					{name:'赵五',amount:6466},
					{name:'赵五',amount:6566},
					{name:'赵五',amount:6666},
					{name:'赵五',amount:6766},
					{name:'赵五',amount:6866},
					{name:'赵五',amount:6966},
					{name:'赵五',amount:6066},
					{name:'赵五',amount:6666},
					{name:'赵五',amount:6666},
					{name:'赵五',amount:6666},
					{name:'赵五',amount:6666},
					{name:'赵五',amount:6666},
					{name:'赵五',amount:6666},
					{name:'赵五',amount:6666},
					{name:'赵五',amount:6666},
					{name:'赵五',amount:6666},
					{name:'赵五',amount:6666},
					{name:'赵五',amount:6666},
					{name:'赵五',amount:6666},
					{name:'赵五',amount:6666},
					{name:'赵五',amount:6666},
					{name:'赵五',amount:6666},
					{name:'赵五',amount:6666}
					]
			}
		},
		methods: {
			confirm(obj){
				let year=obj.year
				let month=obj.month
				let chooseDate=year+'-'+month
				this.chooseDate=chooseDate
				uni.showToast({
					title:'选择了'+this.chooseDate,
					icon:'none'
				})
			},
			changeSort(){
				if(this.sort){
					this.tableList.sort((a,b)=>a.amount-b.amount)
					this.sort=false
				}else{
					this.tableList.sort((a,b)=>b.amount-a.amount)
					this.sort=true
				}
			}
		},
		computed:{
			now(){
				let now=new Date()
				let year=now.getFullYear()
				let month=now.getMonth()+1
				month=month>9?month:'0'+month
				return year+'-'+month
			},
			startYear(){
				let now=new Date()
				let year=now.getFullYear()
				return year-3
			},
			endYear(){
				let now=new Date()
				let year=now.getFullYear()
				return year
			},
			total(){
				return this.tableList.reduce((n,a)=>n+a.amount,0)
			}
		},
		watch:{
			chooseAwradTypes(){
				uni.showToast({
					title:this.awradTypes[this.chooseAwradTypes-1].label,
					icon:'none',
					duration:1000
				})
			}
		}
	}
</script>

<style scoped>
	.bgc-f8{
		background-color: #f8f8f8;
	}
	.margin_l10{
		margin-left: 20rpx;
	}
	.market{
		width: 100vw;
		height: 100vh;
		background-color: #d7d7d7;
	}
	.market-total{
		justify-content: space-between;
	}
	.market-time-picker-title{
		font-size: 16px;
		padding: 30rpx 20rpx;
		position: relative;
		box-sizing: border-box;
		/* border-top:3px solid #d7d7d7;
		border-bottom:3px solid #d7d7d7 ; */
	}
	.market-time-picker-show{
		position: absolute;
		top: 50%;
		right: 20rpx;
		transform: translateY(-50%);
		background-color: #e1e1e1;
		padding: 10rpx;
		border-radius: 1vw;
	}
	.market-list-title{
		padding: 20rpx;
		border-bottom: 1px solid #d7d7d7;
	}
	.market-tax{
		margin-left: 50px;
	}
	.market-list-table{
		box-sizing: border-box;
		padding: 5px 40rpx;
		background-color: #d7d7d7;
	}
	.market-awrad-type{
		display: inline-block;
		height: auto;
		width: 180rpx;
		background-color: #e1e1e1;
		padding: 0 5px;
		border-radius:1vw;
	}
</style>
